<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>患者管理</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <link rel="stylesheet" href="../../../css/font-awesome.min.css">

</head>
<body style="background-color:#fff;">
<div class="layui-fluid">
    <!-- 添加表单 -->
    <form class="layui-form" id="addForm" style="display: none;padding: 5px 5px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">患者姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" name="birth" id="birthday" placeholder="请填写患者出生日期"
                       autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-block">
                <input type="text" name="idcard" placeholder="请填写患者身份证号码"
                       autocomplete="off" class="layui-input" lay-verify="required|idcard">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" placeholder="请填写患者手机号码"
                       autocomplete="off" class="layui-input" lay-verify="required|mobile">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">省份</label>
            <div class="layui-input-block">
                <select name="provinceid" id="province" lay-filter="provinceFilter1">
                    <option>--请选择省--</option>
                </select>
            </div>
            <label class="layui-form-label">城市</label>
            <div class="layui-input-block">
                <select name="cityid" id="city" lay-filter="cityFilter1">
                    <option>--请选择城市--</option>
                </select>
            </div>
            <label class="layui-form-label">区县</label>
            <div class="layui-input-block">
                <select name="areaid" id="area" lay-filter="aihao">
                    <option>--请选择区县--</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="address" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 添加按钮 -->
    <button type="button" class="layui-btn" id="addButton">添加患者</button>
    <!-- 展示患者 start -->
    <div class="layui-row">
        <table class="layui-hide" id="patientList" lay-filter="patientList"></table>
    </div>
    <!-- 展示患者 end -->
</div>
<!-- 编辑、删除按钮 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>

        删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
        编辑
    </a>
    <a class="layui-btn layui-btn-xs" lay-event="register-patient">
        <i class="fa fa-heart"></i>
        挂号</a>
    <a class="layui-btn layui-btn-xs" lay-event="download">
        <i class="layui-icon layui-icon-download-circle"></i>
        下载诊断</a>
</script>

<!-- 修改表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 5px 5px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">患者姓名</label>
        <div class="layui-input-block">
            <input type="hidden" name="pid">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
            <input type="text" name="birth" id="birthday2" placeholder="请填写患者出生日期"
                   autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男">
            <input type="radio" name="sex" value="1" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input type="text" name="idcard" placeholder="请填写患者身份证号码"
                   autocomplete="off" class="layui-input" lay-verify="required|idcard">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" placeholder="请填写患者手机号码"
                   autocomplete="off" class="layui-input" lay-verify="required|mobile">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-block">
            <select name="provinceid" id="province2" lay-filter="provinceFilter2">
                <option>--请选择省--</option>
            </select>
        </div>
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <select name="cityid" id="city2" lay-filter="cityFilter2">
                <option>--请选择市--</option>
            </select>
        </div>
        <label class="layui-form-label">区县</label>
        <div class="layui-input-block">
            <select name="areaid" id="area2" lay-filter="aihao">
                <option>--请选择区县--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="address" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--挂号页面（患者注册表单）-->
<form class="layui-form layui-form-pane" lay-filter="regist-patient" id="patientReigster" style="display: none;padding: 5px 5px 5px 5px">
    <div class="layui-form-item">
        <label class="layui-form-label">患者编号</label>
        <div class="layui-input-block">
            <input type="text" name="patient.pid" id="a1" disabled class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">患者姓名</label>
        <div class="layui-input-block">
            <input type="text" name="patient.name" id="a2" disabled class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择科室</label>
        <div class="layui-input-block">
            <select name="department.did" id="departmentSelect">
                <option value="">请选择科室</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="regist-patient-btn">挂号</button>
        </div>
    </div>
</form>

<script src="../../../layui/layui.js"></script>
<script>
    layui.use(['layer', 'table','form', 'laydate'], function () {
        var $ = layui.$; //注册 jquery 组件
        var table = layui.table;  //注册 table 组件
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;

        //页面加载完成，两个省份下拉框加载数据

        //添加操作
        $('#addButton').click(function () {
            layer.open({
                type:1,
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['900px', '520px'],
                content:$('#addForm')
            })
            //日期
            laydate.render({
                elem: '#birthday'
            });
            $.ajax({
                url:"/springboot-hospital/province/show",
                success:function(result){
                    var s = ""
                    $(result).each(function (i,obj) {
                        s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                        $("#province").html(s);
                        //刷新下拉框  因为下拉框数据是动态更新的
                        form.render('select');
                    })
                }
            })
            //第一个下拉框中省份值改变，将发送查询该省份下城市的ajax请求
            // $("#province").change(function(){
            form.on('select(provinceFilter1)',function () {
                var id = $("#province").val();
                $.ajax({
                    url:'/springboot-hospital/city/show',
                    data:'provinceid='+id,
                    success:function(result){
                        //将查询结果渲染到第二个下拉框
                        var s = ""
                        $(result).each(function (i,obj) {
                            s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                            $("#city").html(s);
                            //刷新下拉框  因为下拉框数据是动态更新的
                            form.render('select');
                        })
                    }
                })
            })
            //第二个下拉框中市份值改变，将发送查询该城市份下区县的ajax请求
            // $("#city").change(function(){
            form.on('select(cityFilter1)',function () {
                var id = $("#city").val();
                $.ajax({
                    url:'/springboot-hospital/area/show',
                    data:'cityid='+id,
                    success:function(result){
                        //将查询结果渲染到第三个下拉框
                        var s = ""
                        $(result).each(function (i,obj) {
                            s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                            $("#area").html(s);
                            //刷新下拉框  因为下拉框数据是动态更新的
                            form.render('select');
                        })
                    }
                })
            })
        })
        //添加患者表单提交
        form.on('submit(addFilter)', function () {
            $.ajax({
                url:'/springboot-hospital/patient/add',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if(result.flag){
                        layer.msg('添加成功');
                        layer.closeAll();
                        $('#addForm')[0].reset();
                        table.reload('patientList')
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //渲染患者表格数据
        table.render({
            elem: '#patientList' //指定原始表格元素选择器（推荐id选择器）
            , url: '/springboot-hospital/patient/show'
            , cols: [[
                {field: 'pid', title: '编号', sort: true},
                {field: 'name', title: '姓名'},
                {title: '性别',templet:function (p) {
                        if(p.sex==0){
                            return '男'
                        }else{
                            return '女'
                        }
                    }},
                {field: 'idcard', title: '身份证号', width: 190},
                {field: 'birth', title: '出生年月日', width: 140},
                {field: 'mobile', title: '电话', width: 130},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 320}
            ]] //设置表头
            , page: true //开启分页
            , limit:4
            , limits:[4,5,6]
        });

        //监听行工具事件
        table.on('tool(patientList)', function (obj) {
            // var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的要删除么', function (index) {
                    $.ajax({
                        url:'/springboot-hospital/patient/remove',
                        data:'pid='+obj.data.pid,
                        success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('patientList')
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                //打开编辑页面
                layer.open({
                    type: 1,
                    title: '更新患者信息',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: ['900px', '520px'],
                    // data为当前行的patient对象,也可以传 id 在更新界面使用 ajax 从数据库获取患者数据
                    // encodeURI:js内置函数，用于将汉字等特殊字符进行转码
                    content: $('#updateForm')   //'UpdatePatient.html?patient=' + encodeURI(JSON.stringify(data))  //建议写成绝对路径;
                });
                //修改页面的日期组件
                laydate.render({
                    elem: '#birthday2'
                });
                $.ajax({
                    url:"/springboot-hospital/province/show",
                    success:function(result){
                        var s = ""
                        $(result).each(function (i,obj) {
                            s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                            $("#province2").html(s);
                            //刷新下拉框  因为下拉框数据是动态更新的
                            form.render('select');
                        })
                    }
                })
                //加载修改页面的城市下拉框数据
                // $("#province2").change(function(){
                form.on('select(provinceFilter2)',function () {
                    var id = $("#province2").val();
                    $.ajax({
                        url:'/springboot-hospital/city/show',
                        data:'provinceid='+id,
                        success:function(result){
                            //将查询结果渲染到第二个下拉框
                            var s = ""
                            $(result).each(function (i,obj) {
                                s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                                $("#city2").html(s);
                                //刷新下拉框  因为下拉框数据是动态更新的
                                form.render('select');
                            })
                        }
                    })
                })
                //加载修改页面的区县下拉框数据
                // $("#city2").change(function(){
                form.on('select(cityFilter2)',function () {
                    var id = $("#city2").val();
                    $.ajax({
                        url:'/springboot-hospital/area/show',
                        data:'cityid='+id,
                        success:function(result){
                            //将查询结果渲染到第三个下拉框
                            var s = ""
                            $(result).each(function (i,obj) {
                                s += "<option value='"+obj.code+"'>"+obj.name+"</option>";
                                $("#area2").html(s);
                                //刷新下拉框  因为下拉框数据是动态更新的
                                form.render('select');
                            })
                        }
                    })
                })
                //回显修改页面的信息
                $.ajax({
                    url:'/springboot-hospital/patient/getOne',
                    data:'pid='+obj.data.pid,
                    success:function (result) {
                        console.log(result);
                        form.val('updateFormFilter', {
                            pid: result.pid,
                            name: result.name,
                            birth:result.birth,
                            mobile:result.mobile,
                            idcard:result.idcard,
                            sex: result.sex,
                            provinceid:result.provinceid,
                            cityid:result.cityid,
                            areaid:result.areaid
                            // 'country.cid': result.country.cid
                            // cid:result.country.cid

                        })
                    }
                })
                //提交修改页面数据
                form.on('submit(updateFilter)',function () {
                    $.ajax({
                        url:'/springboot-hospital/patient/update',
                        data:$('#updateForm').serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.msg('修改成功');
                                layer.closeAll();
                                table.reload('patientList');
                            }
                        }
                    })
                    return false;
                })
            } else if (obj.event === 'register-patient') {
                //打开挂号页面
                layer.open({
                    type: 1,
                    title: '患者挂号',
                    area: '500px',
                    // data为当前行的patient对象,也可以传 id 在更新界面使用 ajax 从数据库获取患者数据
                    // encodeURI:js内置函数，用于将汉字等特殊字符进行转码
                    //content: 'PatientRegister.html?patient=' + encodeURI(JSON.stringify(data))  //建议写成绝对路径;
                    content:$('#patientReigster')
                });
                //回显当前患者患者信息
                $.ajax({
                    url:'/springboot-hospital/patient/getOne',
                    data:'pid='+obj.data.pid,
                    success:function (result){
                        //只需要回显挂号表单中的患者id和姓名
                        form.val('regist-patient',{
                            'patient.pid':result.pid,
                            'patient.name':result.name
                        })

                    }
                })
                //加载所有科室信息
                $.ajax({
                    url:'/springboot-hospital/department/selectAll',
                    success:function (result) {
                        var s = ""
                        $(result).each(function (i,obj) {
                            s += "<option value='"+obj.did+"'>"+obj.name+"</option>";
                            $("#departmentSelect").html(s);
                            //刷新下拉框  因为下拉框数据是动态更新的
                            form.render('select');
                        })
                    }
                })
                //提交挂号表单   给患者诊断记录表添加一条信息
                form.on('submit(regist-patient-btn)',function (data) {
                    // var parm = $('#patientReigster').serialize();
                    // console.log(data.field);
                    // console.log(parm);
                    $.ajax({
                        url:'/springboot-hospital/triage/add',
                        data:data.field,
                        success:function (result) {
                            if(result.flag){
                                layer.msg('挂号成功');
                                layer.closeAll();
                                table.reload('patientList');
                            }
                        }
                    })
                    return false;
                })
            } else if (obj.event === 'download') {
                //下载诊断

            }
        });

    })
</script>
</body>
</html>
